{% load staticfiles %}
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Register Form</title>
<meta name="description" content="">
<meta name="author" content="Ilya-Dorman" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<link rel="stylesheet" href="{% static 'social/css/normalize.css' %}">
<link rel="stylesheet" href="{% static 'social/css/font-face.css' %}">
<link rel="stylesheet" href="{% static 'social/css/color-schemes/dark/hot-pink.css' %}">
<link rel="stylesheet" href="{% static 'social/css/typography.css' %}">
<link rel="stylesheet" href="{% static 'social/css/font-awesome.css' %}">
<link rel="stylesheet" href="{% static 'social/css/main.css' %}">
<style>

    .border,
    .rain{
        height: 600px;
        width: 400px;
    }
        /* Layout with mask */
    .rain{
        padding: 10px 12px 12px 10px;
        -moz-box-shadow: 10px 10px 10px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
        -webkit-box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
        box-shadow: 8px 8px 8px rgba(0,0,0,1) inset, -9px -9px 8px rgba(0,0,0,1) inset;
        margin: 100px auto;
    }
        /* Artifical "border" to clear border to bypass mask */
    .border{
        padding: 1px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
    }

    .border,
    .rain,
    .border.start,
    .rain.start{
        background-repeat: repeat-x, repeat-x, repeat-x, repeat-x;
        background-position: 0 0, 0 0, 0 0, 0 0;
        /* Blue-ish Green Fallback for Mozilla */
        background-image: -moz-linear-gradient(left, #09BA5E 0%, #00C7CE 15%, #3472CF 26%, #00C7CE 48%, #0CCF91 91%, #09BA5E 100%);
        /* Add "Highlight" Texture to the Animation */
        background-image: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,0,0,.3)), color-stop(23%,rgba(0,0,0,.1)), color-stop(40%,rgba(255,231,87,.1)), color-stop(61%,rgba(255,231,87,.2)), color-stop(70%,rgba(255,231,87,.1)), color-stop(80%,rgba(0,0,0,.1)), color-stop(100%,rgba(0,0,0,.25)));
        /* Starting Color */
        background-color: #39f;
        /* Just do something for IE-suck */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00BA1B', endColorstr='#00BA1B',GradientType=1 );
    }

        /* Non-keyframe fallback animation */
    .border.end,
    .rain.end{
        -moz-transition-property: background-position;
        -moz-transition-duration: 30s;
        -moz-transition-timing-function: linear;
        -webkit-transition-property: background-position;
        -webkit-transition-duration: 30s;
        -webkit-transition-timing-function: linear;
        -o-transition-property: background-position;
        -o-transition-duration: 30s;
        -o-transition-timing-function: linear;
        transition-property: background-position;
        transition-duration: 30s;
        transition-timing-function: linear;
        background-position: -5400px 0, -4600px 0, -3800px 0, -3000px 0;
    }

        /* Keyfram-licious animation */
    @-webkit-keyframes colors {
        0% {background-color: #39f;}
        15% {background-color: #F246C9;}
        30% {background-color: #4453F2;}
        45% {background-color: #44F262;}
        60% {background-color: #F257D4;}
        75% {background-color: #EDF255;}
        90% {background-color: #F20006;}
        100% {background-color: #39f;}
    }
    .border,.rain{
        -webkit-animation-direction: normal;
        -webkit-animation-duration: 20s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-name: colors;
        -webkit-animation-timing-function: ease;
    }

        /* In-Active State Style */
    .border.unfocus{
        background: #333 !important;
        -moz-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
        -webkit-box-shadow: 0px 0px 15px rgba(255,255,255,.2);
        box-shadow: 0px 0px 15px rgba(255,255,255,.2);
        -webkit-animation-name: none;
    }
    .rain.unfocus{
        background: #000 !important;
        -webkit-animation-name: none;
    }

        /* Regular Form Styles */
    form{
        background: #212121;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        height: 100%;
        width: 100%;
        background: -moz-radial-gradient(50% 46% 90deg,circle closest-corner, #242424, #090909);
        background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 150, from(#242424), to(#090909));
    }
    form label{
        display: block;
        padding: 10px 10px 5px 15px;
        font-size: 11px;
        color: #777;
    }

    form input{
        display: block;
        margin: 5px 10px 10px 15px;
        width: 85%;
        background: #111;
        -moz-box-shadow: 0px 0px 4px #000 inset;
        -webkit-box-shadow: 0px 0px 4px #000 inset;
        box-shadow: 0px 0px 4px #000 inset;
        outline: 1px solid #333;
        border: 1px solid #000;
        padding: 5px;
        color: #444;
        font-size: 16px;
    }
    form input:focus{
        outline: 1px solid #555;
        color: #FFF;
    }
    input[type="submit"]{
        color: #999;
        padding: 5px 10px;
        float: right;
        margin: 20px 0;
        border: 1px solid #000;
        font-weight: lighter;
        -moz-border-radius: 15px;
        -webkit-border-radius: 15px;
        border-radius: 15px;
        background: #45484d;
        background: -moz-linear-gradient(top, #222 0%, #111 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#222), color-stop(100%,#111));
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22222', endColorstr='#11111',GradientType=0 );
        -moz-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
        -webkit-box-shadow: 0px 1px 1px #000, 0px 1px 0px rgba(255,255,255,.3) inset;
        box-shadow: 0px 1px 1px #000,0px 1px 0px rgba(255,255,255,.3) inset;
        text-shadow: 0 1px 1px #000;
    }

    #passwordStrength
    {
        height:10px;
        display:block;
        float:center;
    }

    .strength0
    {
        width:0px;
        background:#cccccc;
    }

    .strength1
    {
        width:50px;
        background:#ff0000;
    }

    .strength2
    {
        width:100px;
        background:#ff5f5f;
    }

    .strength3
    {
        width:150px;
        background:#56e500;
    }

    .strength4
    {
        background:#4dcd00;
        width:200px;
    }

    .strength5
    {
        background:#399800;
        width:250px;
    }
</style>

<script>
    document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';
</script>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
    $(function() {
        $( "#radio" ).buttonset();
    });
</script>
<script>
    $(function(){
        var $form_inputs =   $('form input');
        var $rainbow_and_border = $('.rain, .border');
        /* Used to provide loping animations in fallback mode */
        $form_inputs.bind('focus', function(){
            $rainbow_and_border.addClass('end').removeClass('unfocus start');
        });
        $form_inputs.bind('blur', function(){
            $rainbow_and_border.addClass('unfocus start').removeClass('end');
        });
        $form_inputs.first().delay(800).queue(function() {
            $(this).focus();
        });
    });
</script>

<script>
    function passwordStrength(password)
    {
        var desc = new Array();
        desc[0] = "Very Weak";
        desc[1] = "Weak";
        desc[2] = "Better";
        desc[3] = "Medium";
        desc[4] = "Strong";
        desc[5] = "Strongest";

        var score   = 0;

        //if password bigger than 6 give 1 point
        if (password.length > 6) score++;

        //if password has both lower and uppercase characters give 1 point
        if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;

        //if password has at least one number give 1 point
        if (password.match(/\d+/)) score++;

        //if password has at least one special caracther give 1 point
        if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )	score++;

        //if password bigger than 12 give another 1 point
        if (password.length > 12) score++;

        document.getElementById("passwordDescription").innerHTML = desc[score];
        document.getElementById("passwordStrength").className = "strength" + score;
    }
</script>

</head>
<body>
<!--[if lt IE 7]>
			<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
		<![endif]-->


<div class="top-ribbon"></div>
<div class="home"><a href="/"><i class="icon-home"></i></a></div>

<header class="categories-header">
    <h1 class="entry-title-font"><i class="icon-cogs"></i>please fill this form to register: </h1>
</header>

<section class="blog-categories">
    <article class="post-excerpt body-font">
        <div class="rain">
            <div class="border start">
                <form action="/" method="post">
                    {% csrf_token %}
                    <label for="firstname">first name</label>
                    <input id="firstname" name="firstname" type="text" placeholder="firstname"/>
                    <label for="lastname">last name</label>
                    <input id="lastname" name="lastname" type="text" placeholder="lastname"/>
                    <label for="pass">Password</label>

                    <input id="password" name="pass" type="password" placeholder="Password" onkeyup="passwordStrength(this.value)"/>

                    <label id="passwordDescription">Password not entered</label>
                    <label id="passwordStrength" class="strength0"></label>
                    <label for=""></label>
                    <label for="email">Email address</label>
                    <input id="email" name="email" type="text" placeholder="email@address.com"/>
                    <label for="birthdate">Your Birth Date:</label>
                    <select style="margin:5px 0px 10px 15px;color:#000000;" name="year" >
                        <option val="1990">1990</option>
                        <option val="1991">1991</option>
                        <option val="1992">1992</option>
                        <option val="1993">1993</option>
                        <option val="1994">1994</option>
                        <option val="1995">1995</option>
                        <option val="1996">1996</option>
                    </select>
                    <select style="margin:5px 0px 10px 15px;color:#000000;" name="month" >
                        <option val="01">1- January</option>
                        <option val="02">2- February</option>
                        <option val="03">3- March</option>
                        <option val="04">4- April</option>
                        <option val="05">5- May</option>
                        <option val="06">6- June</option>
                        <option val="07">7- July</option>
                        <option val="08">8- August</option>
                        <option val="09">9- September</option>
                        <option val="10">10- October</option>
                        <option val="11">11- November</option>
                        <option val="12">12- December</option>
                    </select>
                    <select style="margin:5px 0px 10px 15px;color:#000000;" name="day" >
                        <option value="01">1</option>
                        <option value="02">2</option>
                        <option value="03">3</option>
                        <option value="04">4</option>
                        <option value="05">5</option>
                        <option value="06">6</option>
                        <option value="07">7</option>
                        <option value="08">8</option>
                        <option value="09">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                        <option value="28">28</option>
                        <option value="29">29</option>
                        <option value="30">30</option>
                    </select></br>
                    <p style="margin:15px;">Male</p><input  checked="checked" style="width:15px;" type="radio" name="sex" value="male">
                    <p style="margin:15px;">Female</p><input style="width:15px;" type="radio" name="sex" value="female">

                    <input type="submit" value="REGISTER" style="margin-right:30px;"/>
                </form>
            </div>
        </div>
    </article>


</section>


<footer class="site-footer site-footer-font">
    <div class="sparator"></div>
    <div class="contact">
        <a href="mailto:tellus@slt.com"><i class="icon-envelope-alt"></i> tellus@slt.com</a> &middot;
        <a href="http://www.twitter.com"><i class="icon-twitter"></i> @SLT</a> &middot;
        <a href="http://www.facebook.com"><i class="icon-facebook-sign"></i> /slt</a>
    </div>

</footer>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.8.0.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
